<template>
	<view class="content">
		<view class="heng">
			<view class="left">收件人</view>
			<view class="right">
				<input class="input" placeholder="请输入收件人" maxlength="20" :value="newUserData.name" @input="onInput($event,'name')"/>
			</view>
		</view>
		<view class="heng">
			<view class="left">手机号码</view>
			<view class="right">
				<view class="text1">+86</view>
				<input class="input" placeholder="请输入收件人手机号码" maxlength="11" type="number" :value="newUserData.mobile" @input="onInput($event,'phone')"/>
			</view>
		</view>
		<view class="heng">
			<view class="left">所在地区</view>
			<view class="right" @tap="openLevel">
				<input class="input" placeholder="省/市/区" disabled v-model="userData.addressPathDes"/>
				<view class="text2">
					<image src="/static/me/yb.png"></image>
				</view>
			</view>
		</view>
		<view class="heng">
			<view class="left">详细地址</view>
			<view class="right">
				<input class="input" placeholder="街道信息/门牌号" maxlength="50" :value="newUserData.detailAddress" @input="onInput($event,'adress')"/>
			</view>
		</view>
		<view class="heng2">
			<view class="left">设为默认地址</view>
			<switch color="#ffce2b" style="transform:scale(0.8)" :checked="userData.defaultSelected==1?true:false" @change="switchChange"/>
		</view>
		<view class="btn-box">
			<view class="btn" @click="submit">保存信息</view>
		</view>
		<level-linkage ref="levelLinkage"
			:pickerValueDefault="pickerValueDefault" 
			:allData="treeData"
			@onConfirm="onConfirm" themeColor='#007AFF' v-if="addressShow"></level-linkage>
	</view>
</template>

<script>
	var _this;
	import levelLinkage from "@/components/three-level-linkage/linkage.vue"
	import {
		checkMobile
	} from "@/utils";
	export default {
		components: {
			levelLinkage
		},
		data() {
			return {
				type:false,
				cityPickerValueDefault:[],
				pickerValueDefault: [0, 0, 0],
				treeData:[],
				addressShow:false,
				mobile:'',
				yao:'',//传给后端的三级地址的参数
				newUserData:{
					addressPath: "",
					addressPathDes:"",
					defaultSelected: 0,
					detailAddress: "",
					mobile: "",
					name: "",
				},//为了修改地址的第一次显示赋值（解决input双向绑定闪烁的bug）
				userData:{
					addressPath: "",
					addressPathDes:"",
					defaultSelected: 0,
					detailAddress: "",
					mobile: "",
					name: "",
				},
			};
		},
		onLoad(options) {
			_this=this;
			_this.getAddressThree();
			_this.type=options.data?true:false;
			uni.setNavigationBarTitle({
				title: options.data?'修改地址':'新增地址'
			});
			if(options.data){
				_this.userData=JSON.parse(options.data);
				_this.newUserData=JSON.parse(options.data);
				var arr = _this.userData.addressPath.split("@");
				_this.cityPickerValueDefault.push(...arr);
			}
		},
		methods:{
			onInput(event,type){
				switch(type)
				{
				    case 'name':
				       _this.userData.name=event.target.value;
				        break;
				    case 'phone':
				        _this.userData.mobile=event.target.value;
				        break;
					case 'adress':
						_this.userData.detailAddress=event.target.value;
						break;
				    default:
				        console.log(event);
				}
			},
			openLevel() {
				// 根据 label 获取
				var index = this.$refs.levelLinkage.queryIndex(_this.cityPickerValueDefault.length>0?_this.cityPickerValueDefault:[1,2,3], 'label');
				this.pickerValueDefault = index.index;
				this.$refs.levelLinkage.open();
			},
			onConfirm(e) {
				console.log(e)
				// e 确认后选中的数据
				let arr=[];
				arr[0]=e.firstPick.id;
				arr[1]=e.secondPick.id;
				arr[2]=e.thirdPick.id;
				_this.cityPickerValueDefault = arr;
				_this.userData.addressPathDes=e.name;
				_this.yao=e.parmert;
			},
			getAddressThree(){
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/address/getNewRegionInfo',
					data: {
						time: Date.parse(new Date())
					}
					// header:'form'
				}).then(res => {
					_this.treeData=res;
					_this.addressShow=true;
				}).catch(err => {
					console.log(err);
				});
			},
			switchChange(e) {
				if(e.detail.value){
					_this.userData.defaultSelected=1;
				}else{
					_this.userData.defaultSelected=0;
				}
			},
			submit(){
				if(!_this.userData.name){
					_this.$api.msg('请填写收货人姓名');
					return;
				}
				if(!_this.userData.mobile){
					_this.$api.msg('请填写收货人联系电话');
					return;
				}
				if(!_this.userData.addressPathDes){
					_this.$api.msg('请填写收货人地区');
					return;
				}
				if(!_this.userData.detailAddress){
					_this.$api.msg('请填写收货人详细地址');
					return;
				}
				if (!checkMobile(_this.userData.mobile)) {
					_this.$api.msg('手机号格式错误');
					return;
				}
				let url='';
				let parameter={};
				if(_this.type){
					// 修改
					url='shopServer/address/updateAddress';
					parameter={
						addressPath: _this.yao?_this.yao:_this.userData.addressPath,
						detailAddress: _this.userData.detailAddress,
						id: _this.userData.id,
						mobile: _this.userData.mobile,
						name: _this.userData.name,
						defaultSelected: _this.userData.defaultSelected,
						time: Date.parse(new Date())
					};
				}else{
					// 添加
					url='shopServer/address/addAddress';
					parameter={
						addressPath: _this.yao?_this.yao:_this.userData.addressPath,
						detailAddress: _this.userData.detailAddress,
						mobile: _this.userData.mobile,
						name: _this.userData.name,
						defaultSelected: _this.userData.defaultSelected,
						time: Date.parse(new Date())
					};
				}
				_this.$HTTP({
					method: 'POST',
					url: url,
					data: parameter,
					header:'form'
				}).then(res => {
					_this.$api.msg(_this.type?'修改成功！':'添加成功！');
					setTimeout(function(){
						_this.$routerTo.navigateBack();
					},800)
				}).catch(err => {
					console.log(err);
				});
			}
		}
	}
</script>

<style>
	page{
		background: white;
	}
</style>
<style lang="scss" scoped>
.content{
	width: 100%;
	box-sizing: border-box;
	padding: 0 40rpx 190rpx 40rpx;
	.heng{
		width: 100%;
		height: 180rpx;
		box-sizing: border-box;
		padding: 50rpx 0 8rpx 0;
		border-bottom: 2rpx solid #DEDEDE;
		.left{
			width: 100%;
			font-size: 30rpx;
			color: #999999;
		}
		.right{
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text1{
				font-size: 34rpx;
				color: #333333;
				margin-right: 16rpx;
			}
			.input{
				width: 100%;
				height: 90rpx;
				font-size: 34rpx;
			}
			.text2{
				width: 32rpx;
				height: 32rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.heng2{
		width: 100%;
		margin-top: 55rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			font-size: 32rpx;
			color: #666666;
			font-weight: bold;
		}
	}
	.btn-box{
		width: 100%;
		height: 170rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 40rpx;
		.btn{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
			background: $my-color;
		}
	}
}
</style>
